<template>
  <div class="app">
    <van-nav-bar
        left-arrow
        left-text="服务分类"
    />
    <div style="width: 320px; display: flex; justify-content: center; align-items: center;">
      <van-image
          round
          width="2rem"
          height="2rem"
          src="https://jyyx-cnm.oss-cn-beijing.aliyuncs.com/jyyx/2024/8/12/2214bce283044d3caf72e3acda0347a0.png"
      />
      <span>{{ this.vehicles.name }}</span>
      <van-icon name="arrow"/>
      <el-input
          placeholder="搜索服务项目"
          style="left: 100px"
          prefix-icon="el-icon-search"
          class="search-input"
          v-model="search"
          @keyup.enter.native="findPackageList"
      ></el-input>
    </div>
    <!--    <el-main>-->
    <el-tabs v-model="activeTab">
      <el-tab-pane label="保养"></el-tab-pane>
      <el-tab-pane label="检测"></el-tab-pane>
    </el-tabs>
    <!--    </el-main>-->
    <el-container>
      <el-aside width="100px" style="background-color: rgb(185,11,11);">
        <el-col :span="10">
          <el-menu
              default-active="1"
              style="background-color: rgb(247,248,252);height: 550px;width: 100px;"
              class="el-menu-vertical-demo">
            <el-menu-item :index="item.id" v-for="item in serviceSort" :key="item.id" :label="item.id"
                          v-model="sortId" @click="findPackageList(item.id)">
              {{ item.typeName }}
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-aside>


      <el-main style="height: 550px">
        <!--    种类    -->
        <div>
          <el-radio-group v-model="state" size="mini" id="defaultImages" style="width: 330px;height: 60px">
            <el-radio :label="1" border @change="" style="padding: 6px 7px 0 0 ">常见</el-radio>
            <el-radio :label="0" border @change="" style="padding: 6px 7px 0 0 ">小保养</el-radio>
            <el-radio :label="2" border @change="" style="padding: 6px 7px 0 0 ">大保养</el-radio>
          </el-radio-group>
        </div>

        <!--    套餐卡片展示    -->

        <div style="background-color: rgb(252,252,252);width: 100%;margin-top: 10px;" v-for="item in packageList"
             :key="item.id"
             v-if="item.state===state">
          <el-checkbox :value="item.id" :label="item.id" v-model="ids" @change="doClose()">{{ item.name }}
          </el-checkbox>
          <br>
          ￥{{ totalMoney(item) }}
          <van-card

              v-for="item2 in item.carOrders"
              :key="item2.id"
              :desc="item2.introduce"
              :title="item2.name"
              :thumb="item2.photo"
              num="1"
          >
            <div slot="price">￥{{ item2.price }}</div>
            <div slot="footer">
              <el-button type="primary" size="mini" @click="substitution(item.id,item2.id,item2.mid)">更换</el-button>
              <el-button type="primary" size="mini" @click="findSku(item2.id)">详情</el-button>
            </div>
          </van-card>
          <div style="display: block;height: 30px">工时费 ：{{ item.laborFee }}元</div>
        </div>


      </el-main>
    </el-container>


    <el-footer class="footer">
      <div class="total">
        <van-icon name="cart-o" color="#1989fa"/>
        合计: ￥{{ totalPrice }}
        <br>
        <span>商品￥{{ Price }}+工时费￥{{ LaborFee }}</span>
      </div>
      <el-button type="primary" class="next-step" @click="xyb">下一步</el-button>

    </el-footer>


    <el-dialog :visible="dialog_visible1" @close="dialog_visible1=false" width="90%">
      <div style="height: 300px; overflow-y: auto;"> <!-- 设定固定高度并添加纵向滚动 -->
        <div v-for="item in carOrder" :key="item.id">
          <el-radio v-model="middle.orderId" :label="item.id" border>选择</el-radio>
          <van-card
              :desc="item.introduce"
              :title="item.name"
              :thumb="item.photo"
          >
            <div slot="price">￥{{ item.price }}</div>
          </van-card>
        </div>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="findSubstitution">确定</el-button>
      </div>
    </el-dialog>

    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" @click="shouye()">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o" @click="">分类</van-tabbar-item>
      <van-tabbar-item icon="shop-o" @click="mendian()">门店</van-tabbar-item>
      <van-tabbar-item icon="contact-o" @click="wode()">我的</van-tabbar-item>
    </van-tabbar>


  </div>
</template>

<script>
import axios from "axios";
import {Dialog} from 'vant';
import {
  findOrderList,
  findPackageList,
  findServiceSortList,
  findSubstitutions
} from "@/api/category/category";

export default {

  data() {
    return {
      // 商品分类列表
      serviceSort: [],
      // 套餐列表
      packageList: [],
      packageAll: [],
      // 套餐状态
      state: 1,
      // 搜索
      search: '',
      //分类ID
      sortId: 1,
      num: 1,
      //选择选项
      ids: [],
      packages: [],
      //总价格
      totalPrice: null,
      //商品总价格
      Price: 0,
      //工时费总价格
      LaborFee: 0,
      active: 1,
      dialog_visible1: false,
      middle: {
        id: null,
        packageId: null,
        orderId: null,
        oldOrderId: null
      },
      carOrder: [],
      vehicles: {},
    };
  },
  mounted() {
    this.findServiceSort();
    this.findPackageList();
    this.findOrderList()
    this.findOne()

  },
  methods: {
    totalMoney(row) {
      var money = 0;
      row.carOrders.forEach(item => {
        money += item.price
      })
      row.money = (money * 0.95).toFixed(2)
      return (money * 0.95).toFixed(2);
    },
    findSku(row){
      this.$router.push({path: '/ProductDetails', query: {id: row}})
    },
    findSubstitution() {

      //弹出提示框
      this.$confirm('此操作将更换套餐中商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(this.middle)
        findSubstitutions(this.middle).then(res => {
          if (res.code === 200) {
            this.$message.success("更换成功")
            this.findPackageList()
            this.dialog_visible1 = false
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消更改'
          });
          this.dialog_visible1 = false
        });
      })
    },
    substitution(packageId, oldId, mid) {

      this.middle.packageId = packageId
      this.middle.oldOrderId = oldId
      this.middle.id = mid
      this.dialog_visible1 = true
    },
    //计算价格
    doClose() {
      this.totalPrice = 0
      this.Price = 0
      this.LaborFee = 0

      this.ids.forEach(item => {
        this.packageList.forEach(packageItem => {
          // 判断是否包含该套餐
          if (item === packageItem.id) {
            this.packages.push(packageItem)
          }
        })
      })
      this.packages = Array.from(new Set(this.packages));
      this.packages.forEach(item => {
        this.ids.forEach(item2 => {
          if (item2 === item.id) {
            this.Price += parseFloat(item.money)
            this.LaborFee += parseFloat(item.laborFee)
            this.totalPrice += parseFloat(item.money)+parseFloat(item.laborFee)
          }
        })
      })
    },
    //下一步
    xyb() {
      if (this.packages.length === 0) {
        this.$message.error("请选择套餐")
      } else {
        // 将套餐数据保存到本地
        localStorage.setItem('settlement', JSON.stringify(this.packages))
        this.$router.push({path: '/settlement'})
      }

    },
    findOne() {
      this.axios.get(`http://1.94.221.254:9999/api/qcfw-home/home/vehicles/findOne`).then(res => {
        this.vehicles = res.data.data
      })
    },
    // 查询套餐列表
    findPackageList(row) {
      if (row >= 1) {
        this.sortId = row
      }

      findPackageList(this.sortId, this.search).then(res => {
        this.packageList = res.data
      }).catch(error => {
        console.log(error)
      })
    },

    // 查询商品分类列表
    findServiceSort() {
      findServiceSortList().then(res => {
        this.serviceSort = res.data
      }).catch(error => {
        console.log(error)
      })
    },
    //查询商品
    findOrderList() {
      findOrderList().then(res => {
        this.carOrder = res.data
      }).catch(error => {
        console.log(error)
      })
    },
    shouye() {
      this.$router.push('/shouye')
    },
    wode() {
      this.$router.push('/wode')
    },
    mendian() {
      this.$router.push('/mendian')
    },
  },
  created() {
    localStorage.removeItem('settlement');
  }
};
</script>

<style scoped>
.search-input {
  width: 200px;
}

.service-item {
  border-bottom: 1px solid #eee;
  padding: 10px 0;
}

.product-image {
  width: 60px;
  height: 60px;
}

.product-info {
  margin-left: 10px;
}

.total {
  float: left;
  font-size: 18px;
}

.next-step {
  float: right;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-top: 1px solid #ddd;
}


/*去掉radio的小圆点*/
/deep/ #defaultImages .el-radio__input {
  display: none !important;
}

</style>
